<template>
  <div class="safety-approve-nfo" :class="{ 'is-details': isSignature }">
    <div class="info-list">
      <template v-if="isSignature">
        <div class="contentList">
          <div class="contentLeft">
            <span class="contentLeftFont">作业证编号：</span>
          </div>
          <div class="contentRight border">
            {{ safeExamineDetail.code }}
          </div>
        </div>
        <div class="contentList">
          <div class="contentLeft">
            <span class="contentLeftFont">申请单位：</span>
          </div>
          <div class="contentRight border">
            {{ form.applyDepartmentName }}
          </div>
        </div>
        <div class="contentList">
          <div class="contentLeft">
            <span class="contentLeftFont">申请人：</span>
          </div>
          <div class="contentRight border">
            {{ form.applyPerson }}
          </div>
        </div>
      </template>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">作业级别：</span>
        </div>
        <div class="contentRight border">
          <iu-selector
            :disabled="isSignature"
            class="selector"
            :placeholder="form.taskLevel"
            popupTitle="作业级别"
            :initSelect="form.taskLevel"
            @selected="form.taskLevel = $event"
            :options="levelOption"
          ></iu-selector>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">受限空间所在单位：</span>
        </div>
        <div class="contentRight border">
          <!-- <input
            type="text"
            :disabled="isSignature"
            v-model="form.taskPlace"
            placeholder="请输入受限空间所在单位"
          /> -->
          <organization
            class="changeDep"
            :selectDepartment="{
              departmentName: form.placeDepartmentName
            }"
            :disabled="isSignature"
            :treeData="userServiceArea"
            @department_select="departmentSelected($event, 'place')"
            ref="department"
            :style="{
              color: form.placeDepartmentName
                ? '#fff!important'
                : '#6f6f77!important'
            }"
          >
          </organization>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">受限空间名称：</span>
        </div>
        <div class="contentRight border">
          <input
            type="text"
            :disabled="isSignature"
            v-model="form.taskPlace"
            placeholder="请输入受限空间名称"
          />
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">原有介质名称：</span>
        </div>
        <div class="contentRight border">
          <input
            type="text"
            :disabled="isSignature"
            v-model="form.originalMediaName"
            placeholder="请输入原有介质名称"
          />
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">作业内容：</span>
        </div>
        <div class="contentRight border">
          <input
            type="text"
            :disabled="isSignature"
            v-model="form.taskContent"
            placeholder="请输入作业内容"
          />
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">作业开始时间</span>
        </div>
        <div class="contentRight border" @click="selectTime('startTime')">
          <span v-if="form.startTime">
            {{ form.startTime | formatDate("YYYY-MM-DD HH:mm") }}
          </span>
          <span v-else style="color:rgb(111, 111, 119);">
            选择作业开始时间
          </span>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">作业结束时间</span>
        </div>
        <div class="contentRight border" @click="selectTime('endTime')">
          <span v-if="form.endTime">
            {{ form.endTime | formatDate("YYYY-MM-DD HH:mm") }}
          </span>
          <span v-else style="color:rgb(111, 111, 119);">
            选择作业结束时间
          </span>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">作业现场负责人：</span>
        </div>
        <div class="contentRight border">
          <div
            class="select-user"
            @click="eventPersonSelect('leader', 'taskCharge')"
          >
            <span v-if="form.taskCharge">{{ form.taskCharge }}</span>
            <span v-else style="color: rgb(111, 111, 119);">请选择</span>
          </div>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">监护人：</span>
        </div>
        <div class="contentRight border">
          <div
            class="select-user"
            @click="eventPersonSelect('leader', 'guardian')"
          >
            <span v-if="form.guardian">{{ form.guardian }}</span>
            <span v-else style="color: rgb(111, 111, 119);">请选择</span>
          </div>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">工种：</span>
        </div>
        <div class="contentRight border">
          <input
            type="text"
            :disabled="isSignature"
            v-model="form.guardianWork"
            placeholder="请输入工种"
          />
        </div>
      </div>
    </div>
    <div
      class="info-list"
      v-for="(item, index) in form.person"
      :key="'person' + index"
    >
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">作业人：</span>
        </div>
        <div class="contentRight border">
          <div
            class="select-user"
            @click="eventPersonSelect('user', 'person', index, 'person')"
          >
            <span v-if="item.person">{{ item.person }}</span>
            <span v-else style="color: rgb(111, 111, 119);">请选择</span>
          </div>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <template v-if="!isSignature">
        <div class="esign-btn" v-if="!index" @click="eventPersonAdd">添加</div>
        <div class="esign-btn warning" v-else @click="eventPersonRemove(index)">
          删除
        </div>
      </template>
    </div>
    <div
      class="info-list"
      v-for="(item, index) in form.analysis"
      :key="'analysis' + index"
    >
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">分析时间：</span>
        </div>
        <div
          class="contentRight border"
          @click="selectTime('analysis', index, 'time')"
        >
          <span v-if="item.time">
            {{ item.time | formatDate("YYYY-MM-DD HH:mm") }}
          </span>
          <span v-else style="color:rgb(111, 111, 119);">
            选择分析时间
          </span>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">有毒介质：</span>
        </div>
        <div class="contentRight border">
          <input
            type="text"
            :disabled="isSignature"
            v-model="item.toxicMedium"
            placeholder="请输入"
          />
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">可燃气体：</span>
        </div>
        <div class="contentRight border">
          <input
            type="text"
            :disabled="isSignature"
            v-model="item.combustibleGas"
            placeholder="请输入"
          />
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">氧含量：</span>
        </div>
        <div class="contentRight border">
          <input
            type="text"
            :disabled="isSignature"
            v-model="item.oxygenContent"
            placeholder="请输入"
          />
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">部位：</span>
        </div>
        <div class="contentRight border">
          <input
            type="text"
            :disabled="isSignature"
            v-model="item.point"
            placeholder="请输入部位"
          />
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">分析人：</span>
        </div>
        <div class="contentRight border">
          <div
            class="select-user"
            @click="eventPersonSelect('leader', 'analysis', index, 'person')"
          >
            <span v-if="item.person">{{ item.person }}</span>
            <span v-else style="color: rgb(111, 111, 119);">请选择</span>
          </div>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <template v-if="!isSignature">
        <div class="esign-btn" v-if="!index" @click="eventAnalysisAdd">
          添加
        </div>
        <div
          class="esign-btn warning"
          v-else
          @click="eventAnalysisRemove(index)"
        >
          删除
        </div>
      </template>
    </div>
    <div class="info-list">
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">涉及的其它特殊作业：</span>
        </div>
        <div class="contentRight border">
          <input
            type="text"
            :disabled="isSignature"
            v-model="form.otherWork"
            placeholder="请输入涉及的其它特殊作业"
          />
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">安全教育人：</span>
        </div>
        <div class="contentRight border">
          <div
            class="select-user"
            @click="eventPersonSelect('leader', 'safetyPerson')"
          >
            <span v-if="form.safetyPerson">{{ form.safetyPerson }}</span>
            <span v-else style="color: rgb(111, 111, 119);">请选择</span>
          </div>
          <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
        </div>
      </div>
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">危害辨识：</span>
        </div>
        <div class="contentRight border">
          <iu-selector
            class="selector"
            :placeholder="form.hazardIdentification.join(' , ')"
            popupTitle="危害辨识"
            multiple
            :initSelect="form.hazardIdentification"
            @selected="form.hazardIdentification = $event"
            :options="hazardOption"
          ></iu-selector>
        </div>
      </div>
    </div>
    <div class="info-list">
      <div class="contentList">
        <div class="contentLeft">
          <span class="contentLeftFont">安全措施</span>
        </div>
      </div>
      <div class="contentList full">
        <div class="contentRight" v-if="!isSignature">
          <label data-list="1" class="checkbox-list">
            1. 对进入受限空间危险性进行分析
            <input
              v-model="form.safetyMeasures"
              class="checkbox"
              type="checkbox"
              :disabled="isSignature"
              value="1"
            />
          </label>
          <label data-list="2" class="checkbox-list">
            <div>
              2.
              所有与受限空间联系的阀门、管线加盲板隔离，列出盲板清单，落实了盲板抽堵负责人
            </div>
            <input
              v-model="form.safetyMeasures"
              class="checkbox"
              type="checkbox"
              :disabled="isSignature"
              value="2"
            />
          </label>
          <label data-list="3" class="checkbox-list">
            <div>
              3. 设备经过置换、吹扫、蒸煮
            </div>
            <input
              v-model="form.safetyMeasures"
              class="checkbox"
              type="checkbox"
              :disabled="isSignature"
              value="3"
            />
          </label>
          <label data-list="4" class="checkbox-list">
            <div>
              4.
              设备打开通风孔进行自然通风，温度适宜人员作业；必要时采用强制通风或佩戴隔离正压防护面具，不得用通氧气或富氧空气的方法补充氧
            </div>
            <input
              v-model="form.safetyMeasures"
              class="checkbox"
              type="checkbox"
              :disabled="isSignature"
              value="4"
            />
          </label>
          <label data-list="5" class="checkbox-list">
            <div>
              5.
              相关设备进行处理，带搅拌机的设备已切断电源，电源开关处加锁或挂“禁止合闸”标志牌，设专人监护
            </div>
            <input
              v-model="form.safetyMeasures"
              class="checkbox"
              type="checkbox"
              :disabled="isSignature"
              value="5"
            />
          </label>
          <div data-list="p" class="checkbox-list">
            <div class="contentLeft">
              <span class="contentLeftFont">确认人：</span>
            </div>
            <div class="contentRight border">
              <div
                class="select-user"
                @click="
                  eventPersonSelect(
                    'leader',
                    'safetyMeasuresPerson',
                    0,
                    'person'
                  )
                "
              >
                <span v-if="form.safetyMeasuresPerson[0]">
                  {{ form.safetyMeasuresPerson[0].person }}
                </span>
                <span v-else style="color: rgb(111, 111, 119);">请选择</span>
              </div>
              <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
            </div>
          </div>
          <label data-list="6" class="checkbox-list">
            <div>
              6. 检查受限空间内部已具备作业条件，作业是（无需要/已采用）防爆工具
            </div>
            <input
              v-model="form.safetyMeasures"
              class="checkbox"
              type="checkbox"
              :disabled="isSignature"
              value="6"
            />
          </label>
          <label data-list="7" class="checkbox-list">
            <div>
              7. 检查受限空间进出口通道，无阻碍人员进出的障碍物
            </div>
            <input
              v-model="form.safetyMeasures"
              class="checkbox"
              type="checkbox"
              :disabled="isSignature"
              value="7"
            />
          </label>
          <label data-list="8" class="checkbox-list">
            <div>
              8. 分析盛装过可燃有毒液体、气体的受限空间内可燃、有毒有害气体含量
            </div>
            <input
              v-model="form.safetyMeasures"
              class="checkbox"
              type="checkbox"
              :disabled="isSignature"
              value="8"
            />
          </label>
          <label data-list="9" class="checkbox-list">
            <div>
              9.
              作业人员、监护人员清楚受限空间内存在的危险有害因素，明确作业风险，如内部附件、集渣坑等
            </div>
            <input
              v-model="form.safetyMeasures"
              class="checkbox"
              type="checkbox"
              :disabled="isSignature"
              value="9"
            />
          </label>
          <div data-list="10" class="checkbox-list">
            <div>
              10. 作业监护措施：消防器材（
              <span class="contenteditable" contenteditable> </span>
              ）、救生绳（
              <span class="contenteditable" contenteditable> </span>
              ）、救生三脚架（
              <span class="contenteditable" contenteditable> </span>
              ）、气防装备（
              <span class="contenteditable" contenteditable> </span>
              ）
            </div>
            <input
              v-model="form.safetyMeasures"
              class="checkbox"
              type="checkbox"
              :disabled="isSignature"
              value="10"
            />
          </div>
          <div data-list="p" class="checkbox-list">
            <div class="contentLeft">
              <span class="contentLeftFont">确认人：</span>
            </div>
            <div class="contentRight border">
              <div
                class="select-user"
                @click="
                  eventPersonSelect(
                    'leader',
                    'safetyMeasuresPerson',
                    1,
                    'person'
                  )
                "
              >
                <span v-if="form.safetyMeasuresPerson[1]">{{
                  form.safetyMeasuresPerson[1].person
                }}</span>
                <span v-else style="color: rgb(111, 111, 119);">请选择</span>
              </div>
              <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
            </div>
          </div>
          <label data-list="11" class="checkbox-list">
            <div>
              11. 其他安全措施：<input
                type="text"
                v-model="form.safetyMeasuresOther"
                :disabled="isSignature"
                class="input-text"
                style="width: 100%;text-align: left;"
              />
            </div>
            <input
              v-model="form.safetyMeasures"
              class="checkbox"
              type="checkbox"
              :disabled="isSignature"
              value="12"
            />
          </label>
          <div data-list="p" class="checkbox-list">
            <div class="contentLeft">
              <span class="contentLeftFont">编制人：</span>
            </div>
            <div class="contentRight border">
              <div
                class="select-user"
                @click="
                  eventPersonSelect(
                    'leader',
                    'safetyMeasuresPerson',
                    3,
                    'person'
                  )
                "
              >
                <span v-if="form.safetyMeasuresPerson[3]">{{
                  form.safetyMeasuresPerson[3].person
                }}</span>
                <span v-else style="color: rgb(111, 111, 119);">请选择</span>
              </div>
              <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
            </div>
          </div>
          <div data-list="p" class="checkbox-list">
            <div class="contentLeft">
              <span class="contentLeftFont">确认人：</span>
            </div>
            <div class="contentRight border">
              <div
                class="select-user"
                @click="
                  eventPersonSelect(
                    'leader',
                    'safetyMeasuresPerson',
                    2,
                    'person'
                  )
                "
              >
                <span v-if="form.safetyMeasuresPerson[2]">{{
                  form.safetyMeasuresPerson[2].person
                }}</span>
                <span v-else style="color: rgb(111, 111, 119);">请选择</span>
              </div>
              <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
            </div>
          </div>
        </div>
        <div class="contentRight" v-else>
          <div
            class="checkbox-list"
            v-for="(item, index) in form.safetyMeasuresContent || []"
            :key="index"
          >
            {{ item }}
          </div>
        </div>
      </div>
    </div>
    <template v-if="1">
      <div class="info-list">
        <div
          class="contentList full"
          v-for="(item, index) in acceptancePersonData"
          :key="'acceptance' + index"
        >
          <div class="contentLeft">
            <span class="contentLeftFont">{{ item.name }}</span>
          </div>
          <div class="contentRight border">
            <div
              class="select-user"
              @click="
                eventPersonSelect('leader', 'acceptancePerson', index, 'person')
              "
            >
              <span
                v-if="
                  form.acceptancePerson[index] &&
                    form.acceptancePerson[index].person
                "
              >
                {{ form.acceptancePerson[index].person }}
              </span>
              <span v-else style="color: rgb(111, 111, 119);">请选择</span>
            </div>
            <div class="select-user-right">
              <x-icon type="ios-arrow-right" fill="#fff" size="24"></x-icon>
              <!-- <label>签字顺序：</label>
              <input
                v-model.number="form.acceptancePerson[index].sequence"
                maxlength="1"
                class="esign-sort"
                type="text"
              /> -->
            </div>
          </div>
        </div>
      </div>
    </template>
    <template v-else>
      <div
        class="info-list"
        v-for="(item, index) in acceptancePerson"
        :key="'acceptance' + index"
      >
        <div class="contentList full">
          <div class="contentLeft">
            <span class="contentLeftFont">
              {{
                acceptancePersonData[index] && acceptancePersonData[index].name
              }}
            </span>
          </div>
          <div class="contentRight">
            <div>
              {{ item.userName }}
            </div>
          </div>
        </div>
        <!-- <template v-if="item.checkState != null">
          <div class="contentList full">
            <div class="contentLeft">
              <span class="contentLeftFont">
                审批时间：
              </span>
            </div>
            <div class="contentRight">
              <div>
                {{ item.signatureTime | formatDate }}
              </div>
            </div>
          </div>
          <div class="contentList full">
            <div class="contentLeft">
              <span class="contentLeftFont">
                审批结果：
              </span>
            </div>
            <div class="contentRight">
              <div>
                {{ item.checkState ? "通过" : "不通过" }}
              </div>
            </div>
          </div>
          <div class="contentList full">
            <div class="contentLeft">
              <span class="contentLeftFont">
                审批描述：
              </span>
            </div>
            <div class="contentRight">
              <div>
                {{ item.content }}
              </div>
            </div>
          </div>
        </template> -->
      </div>
    </template>
    <div class="processWrap">
      <template v-if="!isSignature && (isEdit || !safeExamineDetail.id)">
        <div>
          <button @click="back">取消</button>
        </div>
        <div>
          <button @click="eventConfirm(1)">保存草稿</button>
        </div>
        <div>
          <button @click="eventConfirm(4)">提交</button>
        </div>
      </template>
      <template v-if="isSignature && isEsign">
        <div>
          <button @click="eventReject">驳回</button>
        </div>
        <div>
          <button @click="eventEsignConfirm">审批通过</button>
        </div>
      </template>
    </div>
    <div class="esign-fullscreen" v-if="esignShow">
      <div class="info-list">
        <div class="contentList full">
          <div class="contentLeft">
            <span class="notNull" v-if="confirmRejectTag">*</span>
            <span class="contentLeftFont">描述</span>
          </div>
          <div class="contentRight">
            <textarea
              name="userQuestion"
              v-model="esignContent"
              placeholder="请输入描述"
              class="userQuestion"
              maxlength="200"
            ></textarea>
          </div>
        </div>
      </div>
      <div class="info-list" v-if="!confirmRejectTag">
        <div class="contentList full">
          <div class="contentLeft">
            <span class="notNull">*</span>
            <span class="contentLeftFont">签字</span>
          </div>
          <div class="contentRight">
            <vue-esign ref="esign" :width="800" :height="600" bgColor="#fff" />
          </div>
        </div>
      </div>
      <div class="processWrap" v-if="buttonShow">
        <template>
          <div>
            <button @click="handleShowCancel">取消</button>
          </div>
          <div>
            <button @click="handleShowConfirm">保存</button>
          </div>
        </template>
      </div>
    </div>
    <confirm
      class="deviceDetailManage"
      v-model="confirmShow"
      title="提示"
      :close-on-confirm="false"
      @on-cancel="confirmShow = false"
      @on-confirm="handleTipsConfirm"
    >
      <p style="text-align:center;">
        确认要{{ confirmRejectTag ? "驳回" : "通过" }}该审批吗？
      </p>
    </confirm>

    <selectUser
      :show.sync="selectUserShow"
      type="select"
      :user-type="selectUserType"
      :initDepartmentId="form.applyDepartmentId || ''"
      @selected="handlePersonSelected"
    ></selectUser>
  </div>
</template>
<script>
import AssignmentsDataMixin from "./mixin";
export default {
  name: "shouxian",
  mixins: [AssignmentsDataMixin],
  data() {
    return {
      acceptancePersonData: [
        { name: "申请单位验收人：" },
        { name: "设备（工程）部门验收人：" },
        { name: "生产（技术）部门验收人：" },
        { name: "安全管理部门验收人：" },
        { name: "审批验收人：" },
        { name: "作业前，岗位当班班长验收人：" },
        { name: "完工验收人：" },
      ]
    };
  }
};
</script>
